<template>
  <div class="subject-list">
    <h2>{{ subject }}</h2>
    <div class="subject-cards">
      <router-link
        v-for="card in subjectCards"
        :key="card.title"
        :to="{ name: 'HotCourseRanking' }"
        class="subject-card"
      >
        <img src="@/assets/background.jpg" alt="Course Image" />
        <div class="card-info">
          <h3>{{ card.title }}</h3>
          <p>{{ card.description }}</p>
          <p class="price">¥{{ card.price }}</p>
        </div>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    subject: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      allCards: {
        语文: [
          { title: '一年级--语文', description: '专授1年级语文知识', price: 368 },
          { title: '二年级--语文', description: '专授2年级语文知识', price: 520 },
          { title: '三年级--语文', description: '专授3年级语文知识', price: 400 },
          { title: '四年级--语文', description: '专授4年级语文知识', price: 420 },
          { title: '五年级--语文', description: '专授5年级语文知识', price: 450 },
          { title: '六年级--语文', description: '专授6年级语文知识', price: 480 }
        ],
        数学: [
          { title: '一年级--数学', description: '专授1年级数学基础', price: 380 },
          { title: '二年级--数学', description: '巩固2年级数学知识点', price: 410 },
          { title: '三年级--数学', description: '掌握3年级数学核心内容', price: 430 },
          { title: '四年级--数学', description: '深入学习4年级数学', price: 450 },
          { title: '五年级--数学', description: '提升5年级数学能力', price: 470 },
          { title: '六年级--数学', description: '备战升学数学基础', price: 500 }
        ],
        英语: [
          { title: '一年级--英语', description: '启蒙1年级英语学习', price: 350 },
          { title: '二年级--英语', description: '培养2年级英语听说', price: 390 },
          { title: '三年级--英语', description: '提高3年级英语水平', price: 410 },
          { title: '四年级--英语', description: '加强4年级英语表达', price: 430 },
          { title: '五年级--英语', description: '深化5年级英语应用', price: 450 },
          { title: '六年级--英语', description: '准备升学英语能力', price: 480 }
        ],
        物理: [
          { title: '物理', description: '从基础到进阶，全方位掌握物理知识', price: 480 },
            { title: '物理', description: '从基础到进阶，全方位掌握物理知识', price: 480 },
              { title: '物理', description: '从基础到进阶，全方位掌握物理知识', price: 480 },
                { title: '物理', description: '从基础到进阶，全方位掌握物理知识', price: 480 },
                { title: '物理', description: '从基础到进阶，全方位掌握物理知识', price: 480 },
                { title: '物理', description: '从基础到进阶，全方位掌握物理知识', price: 480 },
          
        ],
        化学: [
          { title: '化学', description: '从基础到进阶，全方位掌握化学知识', price: 480 },
          
          { title: '化学', description: '从基础到进阶，全方位掌握化学知识', price: 480 },
          
          { title: '化学', description: '从基础到进阶，全方位掌握化学知识', price: 480 },
          
          { title: '化学', description: '从基础到进阶，全方位掌握化学知识', price: 480 },
           { title: '化学', description: '从基础到进阶，全方位掌握化学知识', price: 480 },
          
          { title: '化学', description: '从基础到进阶，全方位掌握化学知识', price: 480 }
        ],

        历史: [
          { title: '历史', description: '从基础到进阶，全方位掌握历史知识', price: 480 },
           { title: '历史', description: '从基础到进阶，全方位掌握历史知识', price: 480 },
            { title: '历史', description: '从基础到进阶，全方位掌握历史知识', price: 480 },
             { title: '历史', description: '从基础到进阶，全方位掌握历史知识', price: 480 },
              { title: '历史', description: '从基础到进阶，全方位掌握历史知识', price: 480 },
             { title: '历史', description: '从基础到进阶，全方位掌握历史知识', price: 480 }
        ],
        地理: [
          { title: '地理', description: '从基础到进阶，全方位掌握地理知识', price: 480 },
           { title: '地理', description: '从基础到进阶，全方位掌握地理知识', price: 480 },
            { title: '地理', description: '从基础到进阶，全方位掌握地理知识', price: 480 },
             { title: '地理', description: '从基础到进阶，全方位掌握地理知识', price: 480 },
             { title: '地理', description: '从基础到进阶，全方位掌握地理知识', price: 480 },
             { title: '地理', description: '从基础到进阶，全方位掌握地理知识', price: 480 },
             { title: '地理', description: '从基础到进阶，全方位掌握地理知识', price: 480 }
        ],政治:[
          { title: '政治', description: '从基础到进阶，全方位掌握政治知识', price: 480 },
           { title: '政治', description: '从基础到进阶，全方位掌握政治知识', price: 480 },
            { title: '政治', description: '从基础到进阶，全方位掌握政治知识', price: 480 },
             { title: '政治', description: '从基础到进阶，全方位掌握政治知识', price: 480 },
               { title: '政治', description: '从基础到进阶，全方位掌握政治知识', price: 480 },
               { title: '政治', description: '从基础到进阶，全方位掌握政治知识', price: 480 }
        ]
        // 可继续添加其他科目...
      },
      subjectCards: []
    };
  },
  watch: {
    subject(newSubject) {
      this.loadSubjectCards(newSubject);
    }
  },
  created() {
    this.loadSubjectCards(this.subject);
  },
  methods: {
    loadSubjectCards(subject) {
      this.subjectCards = this.allCards[subject] || [];
    }
  }
};
</script>

<style scoped>
.subject-list {
  text-align: center;
}

.subject-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.subject-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  margin: 10px;
  width: calc(33% - 20px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.subject-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.card-info {
  padding: 10px;
}

.card-info .price {
  color: red;
  font-weight: bold;
}
</style>